<template>
  <div>

    <el-form :inline="true" :model="form" class="demo-form-inline">
      <!-- 搜索 -->
      <el-form-item label="学员名称">
        <el-input v-model="searchs" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
      </el-form-item>
      <el-form-item style="position: absolute; right: 100px;">
        <el-button type="primary" style="pa" @click="addp5">新增用户</el-button>
      </el-form-item>
    </el-form>

    <!-- 学员信息列表 -->

   <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%;" @cell-click="celltable">
        <el-table-column label="姓名" prop="name"> </el-table-column>
        <el-table-column label="协议" prop="xieyi"> </el-table-column>

        <el-table-column label="操作" width="180" fixed="right">
        <template>
          <el-button size="mini" @click="editp5">编辑</el-button>
          <el-button size="mini" type="danger" @click="deletep5">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 页码 -->
    <div class="block" style="padding-top: 10px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]" layout="total,  prev, pager, next, jumper" :total="tableData.length">
        >
      </el-pagination>
    </div>

    <!-- 功能组件 -->
    <Addp5 :type="buttontype.addp5" :fun="showbtn" tname="addp5" :tablerow="tablerow"></Addp5>
    <Editp5 :type="buttontype.editp5" :fun="showbtn" tname="editp5" :tablerow="tablerow"></Editp5>
    <Deletep5 :type="buttontype.deletep5" :fun="showbtn" tname="deletep5" :tablerow="tablerow"></Deletep5>

  </div>
</template>

<script>
import Addp5 from './Addp5.vue'
import Editp5 from './Editp5.vue'
import Deletep5 from './Deletep5.vue'
export default {
  data () {
    return {
      searchs: '',
      currentPage: 1, // 初始页
      pagesize: 10, //    每页的数据
      tablerow: '', // 当前选中的用户
      buttontype: {
        // 功能模态框
        addp5: false,
        editp5: false,
        deletep5: false
      },
      form: {
        name: '', // 学员姓名
        xieyi: ''// 协议
      },
      tableData: [
        {
          name: '王小虎',
          xieyi: '是'
        },
        {
          name: '杨文',
          xieyi: '否'
        },
        {
          name: '张力',
          xieyi: '是'
        },
        {
          name: '王梅',
          xieyi: '否'
        }
      ]
    }
  },
  components: {
    Addp5,
    Editp5,
    Deletep5
  },
  methods: {
    search () {
      console.log(this.searchs)
      this.form.search = ''
    },
    // 当前选中的用户
    celltable (row) {
      this.tablerow = row
    },
    // 关闭模态框的状态
    showbtn (type) {
      this.buttontype[type] = false
    },
    // 开启新增学员模态框的状态
    addp5 () {
      this.buttontype.addp5 = true
    },
    // 开启修改学员信息模态框的状态
    editp5 () {
      this.buttontype.editp5 = true
    },
    // 开启删除学员信息模态框的状态
    deletep5 () {
      this.buttontype.deletep5 = true
      // console.log();
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size
      console.log(this.pagesize) // 每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
      console.log(this.currentPage) // 点击第几页
    }
  }
}
</script>

<style scoped="scoped">
</style>
